<template>
  <a-table rowKey="id" size="small" :columns="columns" :dataSource="dataSource" :pagination="false" style="width: 800px">
    <a-tooltip slot="tip" slot-scope="text" placement="topLeft" class="sjht-cursor" v-if="text" :title="text">{{ text }}</a-tooltip>
    <span slot="price" slot-scope="text" class="sjht-price" v-if="text">{{ text }}</span>
  </a-table>
</template>
<script>
export default {
  name: 'ShopOrderProductList',
  props: {
    dataSource: Array
  },
  data() {
    return {
      columns: [
        { title: 'ID', dataIndex: 'id', width: 60 },
        { title: '商品名称', dataIndex: 'name', width: 150, ellipsis: true, scopedSlots: { customRender: 'tip' } },
        { title: '商品类型', dataIndex: 'type', width: 95, align: 'center', customRender: t => (t == 1 ? '荤菜' : t == 2 ? '素菜' : '未知') },
        { title: '下单价格', dataIndex: 'price', width: 75, align: 'center', scopedSlots: { customRender: 'price' } },
        { title: '下单数量', dataIndex: 'number', width: 75, align: 'center' },
        { title: '维生素A', dataIndex: 'vitaminA', width: 75, align: 'center' },
        { title: '维生素B', dataIndex: 'vitaminB', width: 75, align: 'center' },
        { title: '维生素C', dataIndex: 'vitaminC', width: 75, align: 'center' }
      ]
    }
  }
}
</script>